<template>
  <div class="report-bom">
    <template v-if="infos.length > 0">
      <div class="pictureheader  border_style bg_style ">
        <Select clearable class="search-box select-border" @on-clear="handleClear" v-model="expId" placeholder="请选择规则">
          <Option v-for="(item, index) in infos" @click.native="getPageExpDtItem(item)" :value="item.id" :key="index"
            :label="item.exp_name"> </Option>
        </Select>
        <YsButton type="primary" class="searchBtn" @click="getPageExpDtItem(expObj)">查询</YsButton>
        <div class="open-btn">
          <YsButton class="right-between" @click="openNegativeModal()">添加规则</YsButton>
          <YsButton class="right-between" @click="deleteNegativetem()" style="margin-left:10px">删除规则</YsButton>
        </div>
      </div>
      <div class="table-outer border_style bg_style">
        <div class="table-top">
          <ul class="pictureiTop ">
            <li>
              <label class="text_01">规则名称：</label>
              <span class="text_01" :title="expObj.exp_name">{{ expObj.exp_name || '--' }}</span>
            </li>
            <li>
              <label class="text_01">规则编号：</label>
              <span class="text_01" :title="expObj.exp_code">{{ expObj.exp_code || '--' }}</span>
            </li>
            <li>
              <label class="text_01">备注：</label>
              <span class="text_01" :title="expObj.remark">{{ expObj.remark || '--' }}</span>
            </li>
          </ul>
          <div class="table-icon">
            <span @click="exitTempItem" class="icon iconfont icon-bianji text_01"></span>
          </div>
        </div>
        <proTable class="table-st" :loading="tableLoad" :columns="columns" :data="tableList.beansData"
          @clickPage="onClickPage" :current="pege_param.start_recd" :total="tableList.allTotal"
          :pageSize="pege_param.limit_recd">
        </proTable>
      </div>
    </template>
    <template v-else>
      <div class="report-img border_style bg_style">
        <img src="../../assets/images/noData.png" alt="">
        <p class="text_01">暂无内容，请选择区域查看</p>
        <YsButton class="report-btn" type="primary" @click="openNegativeModal">新增规则</YsButton>
      </div>
    </template>
    <add-exp ref="addExpDom" :expObj="expObj"></add-exp>
    <add-exp-dt ref="addExpDtDom" :expObj="expObj"></add-exp-dt>
  </div>
</template>
<script>
import AddExp from './components/addExp'
import AddExpDt from './components/addExpDt'
import { mapGetters, mapActions } from "vuex";
export default {
  name: "NegativeCut",
  components: {
    AddExp,
    AddExpDt
  },
  data() {
    return {
      expId: "",
      fieldFlag: false,
      expObj: {
        id: null
      },
      tableList: {
        allTotal: 0,
        beansData: [],
      },
      pege_param: {
        exp_id: "", // 查询参数：名称、编码
        start_recd: 1, //开始数据
        limit_recd: 5, //查询的条数
      },
      tableLoad: false,
      columns: [
        {
          title: "序号",
          width: 80,
          tooltip: true,
          render: (h, params) => {
            return h(
              "span",
              params.index +
              (this.pege_param.start_recd - 1) *
              this.pege_param.limit_recd +
              1
            );
          },
        },
        {
          title: "字段",
          minWidth: 100,
          key: "field_name",
          tooltip: true
        },
        {
          title: "起始位（包含）",
          key: "exp_start",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: "末位（包含）",
          key: "exp_end",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: "操作",
          width: 150,
          renderHeader: (h, params) => {
            return h('div', {}, [
              h('span', [
                h('span', '操作'),
                h('i', {
                  class: 'icon iconfont icon-tianjia',
                  style: {
                    fontSize: '16px',
                    marginLeft: '5px',
                    marginRight: '14px',
                  },
                  on: {
                    click: (event) => {
                      this.addExpDtFn()
                    },
                  },
                })
              ])
            ])
          },
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: { class: "mouse-on" },
              },
              [
                h("span", {
                  on: {
                    click: (event) => {
                      this.addExpDtFn(params.row)
                    },
                  },
                  class: "textColor",
                  style: {
                    fontSize: "16px",
                    margin: "0 0 0 8px",

                  },
                }, '编辑'),
                h("span", {
                  domProps: {
                    title: "删除",
                  },
                  class: "textColor",
                  on: {
                    click: (event) => {
                      this.deleteExpDtFn(params.row)
                    },
                  },
                  style: {
                    fontSize: "16px",
                    margin: "0 0 0 8px",
                  },
                }, '删除'),
              ]
            );
          },
          tooltip: true
        },
      ],
      infos: [],
    };
  },
  created() {
    this.getNegativeList()
  },
  methods: {
    ...mapActions([
      "getAllExpAPI",
      "delSpringExpViewAPI",
      "getSpringExpDetailPageViewPageExpAPI",
      "delSpringExpDetailViewExpAPI",
      "editSpringExpDetailViewExpAPI"
    ]),
    //打开底片新增
    openNegativeModal() {
      this.$refs.addExpDom.openTplModal(false)
    },
    //获取单个item
    getPageExpDtItem(item) {
      this.expObj = item
      this.getBeansList()
    },
    //select列表
    getNegativeList() {
      this.infos = []
      this.getAllExpAPI({}).then(res => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.infos = data.infos
          if (this.expObj.id) {
            this.expObj= this.infos.find(v => v.id === this.expObj.id)
          }
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        this.$YsMessage.error("获取数据失败");
      });
    },
    //删除模板
    deleteNegativetem() {
      if (Object.keys(this.expObj).length <= 1) return this.$YsMessage.info('请选择要删除的规则');
      this.$YsModal.confirm({
        title: "删除",
        content: "<p>确认是否删除！</p>",
        onOk: () => {
          this.delSpringExpViewAPI({ info: { id: this.expObj.id } }).then(res => {
            let { data, msg, scode, status } = res;
            if (status === 'ok') {
              this.getNegativeList()
              this.expObj = this.$options.data().expObj
              this.$YsMessage.success(data.message_text);
            }
          }).catch(err => {
            this.$YsMessage.error('删除失败');
          })
        },
      });
    },
    //规则编辑弹出框
    exitTempItem() {
      if (Object.keys(this.expObj).length <= 1) return this.$YsMessage.info('请选择要编辑的规则');
      this.$refs.addExpDom.openTplModal(true)
    },
    //分页
    onClickPage(pageNum) {
      this.pege_param.start_recd = pageNum;
      this.getBeansList();
    },
    // 获取列表数据
    getBeansList() {
      this.tableList.beansData = []
      this.pege_param.exp_id = this.expObj.id
      this.getSpringExpDetailPageViewPageExpAPI(this.pege_param).then(res => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.tableList.allTotal = data.all_recd
          this.tableList.beansData = data.beans
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        this.$YsMessage.error("获取数据失败");
      });
    },
    // 字段删除
    deleteExpDtFn(item) {
      this.$YsModal.confirm({
        title: "删除",
        content: "<p>确认是否删除！</p>",
        onOk: () => {
          this.delSpringExpDetailViewExpAPI({ info: { id: item.id } }).then(res => {
            let { data, msg, scode, status } = res;
            if (status === 'ok') {
              this.getBeansList()
              this.$YsMessage.success(data.message_text);
            } else {
              this.$YsMessage.error(msg);
            }
          }).catch(err => {
            this.$YsMessage.error('删除失败');
          })
        },
      });
    },
    //清楚
    handleClear() {
      this.expObj = this.$options.data().expObj
    },
    //新增字段
    addExpDtFn(item) {
      if (Object.keys(this.expObj).length <= 1) return this.$YsMessage.info('请选择规则');
      this.$refs.addExpDtDom.openFielModal(item)
    }
  },
};
</script>
<style lang="less" scoped>
.report-bom {
  height: 100%;

  .report-img {
    border: 1px solid transparent;
    border-radius: 4px;
    height: calc(100% - 20px);
    text-align: center;

    img {
      display: block;
      margin: 200px auto 0;
      width: 142px;
    }

    p {
      font-size: 14px;
      opacity: 0.6;
      text-align: center;
      margin-top: 14px;
    }

    .report-btn {
      margin-top: 50px;
    }
  }

  .pictureheader {
    height: 72px;
    overflow: hidden;
    display: flex;
    padding: 0 16px;
    align-items: center;
    border-radius: 4px;
    margin-bottom: 8px;
    border: 1px solid transparent;

    .open-btn {
      margin-left: auto;

      button {
        //   width: 80px;
        //   min-width: 80px;
        height: 40px;
        background: rgba(255, 255, 255, 0.39);
        border: 1px solid #0061ff;
        opacity: 1;
        border-radius: 4px;
        color: #0091ff;
        font-size: 16px;
        font-family: PingFang SC;
      }
    }

    .search-input {
      height: 40px;
      width: 208px;
      margin-right: 10px;
      border-radius: 4px;
    }

    .search-btn {
      margin-left: auto;
    }
  }

  .table-outer {
    min-width: 820px;
    height: calc(100% - 100px);
    border-radius: 4px;
    border: 1px solid transparent;

    .table-st {
      height: calc(100% - 56px);
    }

    .table-top {
      height: 56px;
      line-height: 56px;
      display: flex;

      .pictureiTop {
        width: 80%;
        height: 56px;

        align-items: center;
        display: flex;
        padding: 0 24px;

        li {
          display: flex;
          margin-right: 30px;
          font-size: 16px;

          label {
            opacity: 0.6;
          }

          span {
            min-width: 100px;
            max-width: 300px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }

      .table-icon {
        margin-left: auto;
        padding-right: 16px;

        .icon-bianji {
          margin-right: 8px;
        }
      }
    }
  }

  /deep/ .textColor {
    cursor: pointer;
    color: #0091ff;

    &:hover {
      opacity: 0.8;
    }
  }
}

.search-box {
  width: 232px;
  margin-right: 16px;
}

/deep/ .ivu-modal-header {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/deep/ .ivu-modal-close {
  right: 18px;
}

/deep/.ivu-input-word-count {
  font-size: 14px;
}

.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
  margin-right: 0 !important;
}

.select-border {
  width: 208px;
  height: 40px;
  margin-right: 10px;
}
</style>
